<template>
  <div class="doctor-answer-container">
    <div v-if="errorMessage" class="error-message">
      {{ errorMessage }}
    </div>

    <div v-else class="answer-form" v-if="questionLoaded">
      <el-form ref="answerForm" :model="form" :rules="rules" label-width="80px">
        <el-form-item label="住院号">
          <el-input v-model="form.hospitalNumber" disabled></el-input>
        </el-form-item>

        <el-form-item label="问题">
          <el-input type="textarea" v-model="form.questionText" disabled :rows="4"></el-input>
        </el-form-item>

        <el-form-item label="答案" prop="answerText">
          <el-input type="textarea" v-model="form.answerText" :rows="6" placeholder="请输入回答内容，最多500个字符"></el-input>
          <div style="color: #666; font-size: 12px; margin-top: 5px; text-align: right;">
            {{ form.answerText ? form.answerText.length : 0 }}/500
          </div>
        </el-form-item>

        <el-form-item>
          <el-button type="primary" @click="submitAnswer">提交</el-button>
        </el-form-item>
      </el-form>
    </div>
  </div>
</template>

<script>
import { apiClient } from './api/apiClient'
import { getQueryParams } from './util/url'

export default {
  data() {
    return {
      form: {
        hospitalNumber: '',
        questionText: '',
        answerText: ''
      },
      rules: {
        answerText: [
          { required: true, message: '请输入答案', trigger: 'blur' },
          { max: 500, message: '答案不能超过500个字符', trigger: 'blur' }
        ]
      },
      errorMessage: '',
      questionLoaded: false,
      queryParams: {}
    }
  },

  created() {
    // 获取URL参数
    this.queryParams = getQueryParams();
    console.log(this.queryParams);
    if (!this.queryParams.question_id || !this.queryParams.token) {
      this.errorMessage = '参数错误，请检查链接';
      return;
    }

    // 获取问题信息
    this.getQuestionInfo();
  },

  methods: {
    getQuestionInfo() {
      apiClient.get('/messageAlert/doctorGetQuestion', {
        params: {
          questionId: this.queryParams.question_id,
          token: this.queryParams.token
        }
      }).then(response => {
        console.log(response);
        if (response.data.code === 1) {
          const data = response.data.data;
          this.form.hospitalNumber = data.hospitalNumber;
          this.form.questionText = data.questionText;
          this.form.answerText = data.answerText;
          this.questionLoaded = true;
        } else {
          this.errorMessage = response.data.msg || '获取问题信息失败';
        }
      }).catch(error => {
        console.error('获取问题信息失败:', error);
        this.errorMessage = error.response?.data?.msg || '获取问题信息失败';
      });
    },

    submitAnswer() {
      this.$refs.answerForm.validate(valid => {
        if (valid) {
          this.$confirm('确定提交回答吗？', '提示', {
            confirmButtonText: '确定',
            cancelButtonText: '取消',
            type: 'warning'
          }).then(() => {
            const params = {
              questionId: this.queryParams.question_id,
              token: this.queryParams.token,
              answerText: this.form.answerText
            };

            apiClient.post('/messageAlert/doctorAnswer', params)
                .then(response => {
                  if (response.data.code === 1) {
                    this.$message.success('回答提交成功');
                    // 提交成功后可以跳转到成功页面或关闭窗口
                    setTimeout(() => {
                      window.close();
                    }, 1500);
                  } else {
                    this.$message.error(response.data.msg || '提交失败');
                  }
                })
                .catch(error => {
                  console.error('提交回答失败:', error);
                  this.$message.error(error.response?.data?.msg || '提交失败');
                });
          });
        }
      });
    }
  }
}
</script>

<style scoped>
.doctor-answer-container {
  max-width: 800px;
  margin: 20px auto;
  padding: 20px;
  box-shadow: 0 0 10px rgba(0,0,0,0.1);
}

.error-message {
  color: #F56C6C;
  text-align: center;
  padding: 50px 0;
  font-size: 16px;
}

.answer-form {
  background: #fff;
  padding: 20px;
  border-radius: 4px;
}
</style>